<!DOCTYPE html>
<html lang="zh-cn" class="pui-app" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <meta name="renderer" content="webkit" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="description" content="Plane UI" />
    <meta name="keywords" content="Plane UI" />
    <title>宠-首页</title>

    <link rel="stylesheet" type="text/css" href="/planeui/dist/css/planeui.css" />
    <style>
        .iScrollIndicator {
            width: 5px !important;
            border: none !important;
        }
    </style>
</head>
<body>
<!--[if lte IE 9]>
<div class="pui-layout pui-browsehappy">
    <a href="javascript:;" class="pui-close" onclick="document.body.removeChild(this.parentNode);"></a>
    <p>您正在使用 <strong class="pui-text-yellow pui-text-xl">过时</strong> 的非现代浏览器，<strong class="pui-text-success pui-text-xl">91.23%</strong> 的人选择 <a href="http://browsehappy.com/" target="_blank" class="pui-text-green-400 pui-text-xl"><strong>升级浏览器</strong></a>，获得了更好、更安全的浏览体验！</p>
</div>
<![endif]-->
<div class="pui-layout pui-app-layout">
    <div class="pui-side-slide-left">
        <div style="height:2000px;">左侧滑出层</div>
    </div>
    <div class="pui-side-slide-top">
        <div style="height:400px;">顶部滑出层</div>
    </div>
    <div class="pui-app-main pui-app-main-prev">
        <header class="pui-app-header pui-bg-blue-300">
            <div class="pui-app-header-aside">
                <!--                <a href="javascript:;" pui-side-slide="left">-->
                <a href="javascript:;">
                    <i class="fa fa-2x pui-text-white">宠</i>
                    <!--                    <i class="fa fa-list fa-2x pui-text-white"></i>-->
                </a>
            </div>
            <div class="pui-app-header-middle" pui-side-slide="top">
                <strong class="pui-h4 pui-text-white">那些温暖的宠</strong>
            </div>
            <div class="pui-app-header-offside">
                <!--                pui-side-slide="right"-->
                <a href="/home/myhome"  class="pui-text-white pui-text-xxl" style="font-size:12px;line-height:1;line-height:1;padding: 3px 12px 5px;">
                    返回
                </a>
            </div>
        </header>
        <div style="padding-top:5px;">
            <div th:replace="/common/common_banner"></div>
        </div>
        <div class="pui-app-main-container" id="wrapper1" style="padding:10px;background-color:#d6f8ff;">
            <div class="pui-layout pui-layout-fixed pui-layout-fixed-1200 pui-layout-fixed-1400 pui-layout-fixed-1500 pui-layout-fixed-1800">
                <div class="pui-grid">
                    <div class="pui-row">
                        <form id="join_form">
                            <div th:each="item:${photoList}" class="pui-grid-xs-6 pui-grid-sm-4 pui-grid-md-3 pui-grid-lg-3 pui-grid-xl-3 pui-grid-xxl-3">
                                <div class="pui-card">
                                    <p class="pui-xs-show">
                                        <img th:src="${item.url}" style="width:200px;height:200px" class="pui-img-thumbnail pui-img-md pui-img-radius-plus-3">
                                    <div>
<!--                                        <div class="pui-form-group" style="padding:0px;">-->
<!--                                            <pui-radio>加入活动<input type="radio" name="fileId" th:value=""></pui-radio>-->
<!--                                            &lt;!&ndash;                                                <pui-checkbox>加入活动<input type="checkbox" name="fileId" th:value="${item.id}"></pui-checkbox>&ndash;&gt;-->
<!--                                        </div>-->
                                    </div>
                                    </p>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <div class="pui-container pui-clear" style="padding-top:10px;padding-bottom:20px;">
            <ul class="pui-pagination pui-pagination-bordered pui-pagination-gradient" th:if="${#pageUtil.pageInit(page,#request)}">
                <li><span>显示 [[${(page.number*page.size)+1}]]/[[${(page.number*page.size)+page.numberOfElements}]] 条</span></li>
                <!--                <li><a href="#" class="disabled">首页</a></li>-->
                <li th:each="pageCode:${#pageUtil.pageCode(page)}">
                    <a th:class="${#pageUtil.pageActive(page, pageCode, 'active')}" th:if="${#pageUtil.isCode(pageCode)} ne true" th:href="@{${#pageUtil.pageHref(pageCode)}}">[[${pageCode}]]</a>
                    <a th:class="${#pageUtil.pageActive(page, pageCode, 'active')}" th:if="${#pageUtil.isCode(pageCode)}">…</a>
                </li>
                <!--                <li th:if="${#pageUtil.isPrevious(page)}"><a th:href="@{${#pageUtil.pageHref(page.number)}}">上页</a></li>-->
                <!--                <li th:if="${#pageUtil.isNext(page)}"><a th:href="@{${#pageUtil.pageHref(page.number+2)}}">下页</a></li>-->
                <li><span>共 [[${page.totalElements}]] 条记录</span></li>
                <!--                <li><a href="#">尾页</a></li>-->
            </ul>
        </div>
        <!-- footer -->
<!--        <footer class="pui-app-footer">-->
<!--            <div class="pui-button-sheet pui-button-sheet-table pui-button-sheet-hover-pui-bg-none pui-unbordered" style="height:100%;">-->
<!--                <div class="pui-button-sheet-row" style="height:48px;">-->
<!--                    &lt;!&ndash;                    <a href="/home/index" pui-side-position="left"><i class="fa fa-home fa-2x"></i>返回首页</a>&ndash;&gt;-->
<!--                    <a id="joinClick" pui-side-position="left" style="color:green;background-color:lightgreen"><i class="fa fa-check-circle fa-2x" style="color:green;"></i>报名参与</a>-->
<!--                    &lt;!&ndash;                    <a id="upload_click" pui-side-position="top"><i class="fa fa-share-alt fa-2x"></i>分享好友</a>&ndash;&gt;-->
<!--                </div>-->
<!--            </div>-->
<!--        </footer>-->
        <div class="pui-mask pui-mask-bg" style="display: none;opacity:0;"></div>

    </div>
</div>

<div class="big_img">
    <div class="swiper-container2">
        <div class="swiper-wrapper">

        </div>
    </div>
    <div class="swiper-pagination2"></div>
</div>

<!--[if (gte IE 9) | !(IE)]><!-->
<script type="text/javascript" src="/planeui/app/js/jquery-2.1.1.min.js"></script>
<!--<![endif]-->

<!--[if lt IE 9]>
<script type="text/javascript" src="/planeui/app/js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="/planeui/dist/js/planeui.patch.ie8.js"></script>
<![endif]-->

<!--[if lt IE 10]>
<script type="text/javascript" src="/planeui/dist/js/planeui.patch.ie9.js"></script>
<![endif]-->
<script type="text/javascript" src="/planeui/dist/js/planeui.js"></script>
<script type="text/javascript" src="/planeui/app/js/iscroll.js"></script>
<script type="text/javascript" src="/js/join.js"></script>
<script type="text/javascript" src="/js/lujs.js"></script>
<script type="text/javascript">
    $(function() {
        var activityId = $("#activityId").val();
        var views_url = "/home/api/activityViews/"+activityId;
        $.post(views_url,function(data,status){
            console.log("nStatus: " + status);
        });
        //     slow: 600,
        //     fast: 200,
        //     // Default speed
        //     _default: 400
        PUI(".pui-tab:not(#test3):not(#test2)").tab({
            speed : "_default",
            showMode : "slide",
            //cached : true,
            //ajax : true,
            //ajaxLoading : '<div class="pui-loading-spinner pui-animation-rotate pui-animation-repeat pui-animation-reverse pui-text-center"><span class="fa fa-spinner fa-2x"></span></div> 正在加载内容，请稍后...',
            callback : function(tab, tabHead, tabBox, index, settings) {
                // tabBox.eq(index).append("开启Ajax时，Ajax请求成功后的回调" + index);
            }
        });
        $("#test3").tab({
            speed : "_default",
            showMode : "scroll-x"
        });
        $("#test2").tab({
            speed : "_default",
            showMode : "scroll-y"
        });
    });
</script>
</body>
</html>